// namespace: "Register" 
<template>
  <div class="register">
    <div class="register-container">
      <h2>用户注册</h2>
      <el-form
        :model="regiserForm"
        :rules="registerRules"
        ref="register-form"
        status-icon
        label-width="100px"
        class="register-regiserForm"
      >
        <el-form-item label="用户名" prop="username">
          <el-input v-model="regiserForm.username"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="regiserForm.email"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input type="password" v-model="regiserForm.password" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="checkPassword">
          <el-input type="password" v-model="regiserForm.checkPassword" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="选择身份" prop="level">
          <el-radio-group v-model="regiserForm.level">
            <el-radio label="visitor">游客</el-radio>
            <el-radio label="user">用户</el-radio>
            <el-radio label="admin">管理员</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item class="btns">
          <el-button type="primary" @click="submitForm('register-form')">提交</el-button>
          <div class="forgetPassword">
            已有账号？
            <a @click.prevent="toLogin">前往登录</a>
          </div>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref, getCurrentInstance } from "vue";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";

import { regiserForm, registerRules } from "../interface/register";
export default defineComponent({
  name: "Register",
  setup() {
    // @ts-ignore
    const { ctx } = getCurrentInstance();

    // 注册表单校验
    const submitForm = (formName: string) => {
      ctx.$refs[formName].validate((valid: any) => {
        if (valid) {
          register();
        }
      });
    };

    // 初始化表单数据
    const initForm = () => {
      regiserForm.username = "";
      regiserForm.email = "";
      regiserForm.password = "";
      regiserForm.checkPassword = "";
      regiserForm.level = "visitor";
    };

    // 注册账号
    const register = () => {
      ctx
        .$axios({
          method: "post",
          url: "/serverApi/register",
          data: {
            ...regiserForm
          }
        })
        .then((result: any) => {
          /*
           * @result
           * { code:num, msg:string }
           */
          if (result.code == 200) {
            ElMessage.success("注册成功");
            setTimeout(() => {
              toLogin();
            }, 500);
          } else {
            ElMessage.error(`${result.msg}`);
          }
        })
        .catch((err: Error) => {
          console.log("注册 Error", err);
        })
        .finally(() => initForm());
    };

    const router = useRouter();
    const toLogin = () => {
      router.push("/login");
    };

    return { regiserForm, registerRules, submitForm, toLogin };
  }
});
</script>
<style lang="scss" scoped>
.register {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  height: 100%;
  background-image: url("../assets/image/login_bg.png");
  .register-container {
    margin-right: 100px;
    padding-top: 200px;
    width: 620px;
    h2 {
      color: #fff;
    }
    .register-regiserForm {
      padding: 20px 20px 0 0;
      border: 1px solid #cccccc;
      border-radius: 8px;
    }
  }
}
</style>


<style lang="scss" >
.register {
  .register-regiserForm {
    label {
      color: #fff;
    }
  }
  .btns .el-form-item__content {
    display: flex;
    .forgetPassword {
      margin-left: 60px;
      color: #fff;
      // margin-left: 290px;
      a {
        color: #409eff;
        cursor: pointer;
      }
    }
  }
}
</style>